Skip to main content
Spacings and LayoutOur design system uses a pre-defined spacing presets and grid to ensure clear, balanced and scalable layouts. All screens and custom made solutions must be constructed using these spacing principles.
General LayoutAll Wix Mobile Apps on smartphone devices use grid and spacing presets based on multiples of 4px (8, 12, 16 etc.). Same logic is used in our components. Basic screen layout includes elements like the Status Bar (as a part of the Top Bar) and Bottom Bar (bottom navigation/bottom tabs). Since these components are platform sensitive, iOS and Android layouts are somewhat different. Page margins are predefined and consistent across all screens. Wix Apps displayed in a smartphone use a portrait orientation only.
Spacing PresetsAll Wix Mobile Apps on a smartphone devices use spacing presets based on multiples of 4px (8, 12, 16 etc.). Same principle is implemented in our components. On tablet devices, spacing increments are different to ensure a proper layout adaptation.
Spacing Accessories in FigmaFor your convenience and scalability, we provide spacing presets as variables in Figma. In addition, you can find spacing marking and annotations in the Figma library, under UX Accessories feel free to use these in your screens specs.
Optical Spacing

Using optical spacing ensures visually balanced and aesthetically pleasing screen layout. It is an “empty space” between visible elements and ignores actual component container/boundary.
We use two primary optical spacing options:
40px optical spacing should be applied in these:

  • Below Tob Bar component
  • Above and below titles
  • Above and below dividers

28px optical spacing is applied below the TabBar component.

Spacing presets should always be used in screen layout. When an optical spacing is required, final components positioning should be adjusted according to a spacing preset.
In some cases, you won’t be able to pick a matching spacing preset. In such cases, optical spacing can be greater than 40 or 28 pixels.
In addition, many components have padding implemented in them, so actual spacing preset differ (see examples below):

Tablet Grid and LayoutDevices with screen width greater than 767px are considered as Tablets. On tablets, both portrait and landscape orientations are supported. The screen layout adapts to the screen size, according to the layout principles shown below: